<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom入门</title>

    <style>
      #father {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px;
      }

    
      .children {
        margin: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      
      .newChildren{
        background-color: rebeccapurple;
      }

      button {
        padding: 10px 20px;
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
      .nav {
        width: 400px;
        height: 300px;
        border: 2px solid red;

      }
      .navNew {
        background-color: blue;
        color: azure;
      }
    </style>
  </head>

  <body>
    <p id="js">JavaScript</p>
    <div id="father">
      <div class="children">this is children1</div>
      <div class="children" id = "children1">this is children2</div>
      <div class="children">this is children3</div>
   </div>
    <form id="test">

      <button type="button"  onclick="ranName()">抽一次</button>
      <button type="button" onclick="addDiv()">add</button>
      <button type="button" onclick="delDiv()">delete</button>

    </form>
   
    

    <div class="nav">1234</div>
    <button type="button" onclick="changeBox()">xiugai</button>

    <script>

      /* 
      1. 查getElementById tagname classname
      2. createElement
      3. 父节点 appendChild insertBefor
      4. removeChild
      5. 属性 类名 style id 文本 html
      */

    const js = document.getElementById('js');
    const list = document.getElementById('father');
    const ch1 = document.getElementById('children1')

    const newNode = document.createElement('div');

    console.log(document.querySelector('#js'));
    
    newNode.innerText = "111"
    newNode.id = "new"

    list.appendChild




    list.insertBefore(newNode,ch1)

    list.removeChild(ch1)

      const all = document.querySelectorAll("div")

      const nav = document.querySelector('.nav')



      const fath = all[0];

      console.log(fath);

      for (let index = 1; index < all.length; index++) {
        const element = all[index];

        //文本值
        element.innerHTML = `<h1>我是${index}</h1>`
        //

        element.title= index

        // element.style.color= 'red'

        // element.style.height= '120px'

        // element.style.backgroundColor= 'blue'

        

        
        element.classList.add('newChildren')
        element.classList.remove('children')

        console.log(element);
        
      }

      

      const fa = document.querySelector("#children3");

      function addDiv(){
        const div = document.createElement('div')

        div.id = "new"
        div.innerText = "new div"
        const fa = document.getElementById("father");

        fa.appendChild(div)
      }

      function delDiv(){
        const del = document.getElementById('new');

        del.parentElement.removeChild(del)

      }

      function changeBox() {
        const box = document.querySelector(".nav");

        // box.className +=" navNew"
        box.classList.toggle("navNew");
      }

      
      function ranName() {
        const divList = document.querySelectorAll("#father div");

        const nameList = ["alice", "bob", "candy", "david", "even", "frank"];

        divList.forEach((element) => {
          let index = Math.floor(Math.random() * nameList.length);

          console.log(index);

          let name = nameList.splice(index, 1);

          console.log(name);

          element.innerText = name;
        });
      }
    </script>
  </body>
</html>
